<template>
    <h-section title="自发产品需求" collapse :defaultOpen="!!productList.length || !disabled" style="padding-top: 0" ref="relateProduct">
        <product-table :list="productList" v-bind="$props" @deleteHandle="handleDelete" />
        <a-modal title="需求调整原因" centered v-model:visible="visible" :width="800">
            <a-textarea placeholder="请输入需求调整原因限制255个字" showCount :maxlength="255" auto-size v-model:value="changeOpinion" />
            <template #footer>
                <flexbox justify="flex-end" class="btn-group">
                    <a-button type="primary" @click="handleOk">提交</a-button>
                </flexbox>
            </template>
        </a-modal>
    </h-section>
</template>

<script lang="ts">
import ProductTable from './productTable.vue';
import api from '@/api';
import store from '@/store';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, reactive, toRefs, watch, computed } from 'vue';
export default defineComponent({
    name: 'RelateProductList',
    components: {
        ProductTable
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' },
        hasAuth: { type: Boolean, default: false }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const relateProductRef = ref<ComponentRef>(null);
        const state = reactive<any>({
            form: {
                pmpProductRequires: []
            },
            changeOpinion: '',
            productRequireId: '',
            visible: false
        });
        // 没有关联业务需求的产品需求
        const productList = computed(() => {
            return state.form.pmpProductRequires.filter((item) => !item.relateRequireId);
        });
        const handleOk = async () => {
            if (state.visible === true && !state.changeOpinion) {
                message.error('调整原因不能为空');
                return;
            }
            state.visible = false;
            const { id, versionName, versionNumber, processStatus } = props.detail;
            const { empId, name } = store.getters.userInfo.employeeDTO;
            const query = {
                productRequireId: state.productRequireId,
                relateVersionId: id,
                relateVersionName: versionName,
                relateVersionNumber: versionNumber,
                status: 'delete',
                record: ['3', '4', '5', '6', '7', '8', '9'].includes(processStatus), // 789(验收，上线审核和上线流程)需要记录需求列表操作
                empId,
                empName: name,
                processStatus,
                taskNode: props.stepStatus,
                changeOpinion: state.changeOpinion
            };
            const { success, errorMsg } = await api.productRequireModel.batchDeal([query]);
            if (success) {
                message.success('操作成功');
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        const handleDelete = async (productRequireId: number) => {
            state.productRequireId = productRequireId;
            if (props.detail.pmpProductRequires.length === 1 && props.stepStatus === 'requireOnline') {
                message.warn('这是该版本唯一的需求，不可移除');
                return;
            }
            if (+props.detail.processStatus >= 3) {
                state.visible = true;
                state.changeOpinion = '';
            } else {
                handleOk();
            }
        };
        const init = () => {
            state.form.pmpProductRequires = props.detail.pmpProductRequires ? props.detail.pmpProductRequires : [];
        };
        init();
        watch(() => props.detail, init, { deep: true });
        return {
            relateProductRef,
            ...toRefs(state),
            productList,
            handleDelete,
            handleOk
        };
    }
});
</script>
<style lang="less" scoped>
.flow-text {
    margin-bottom: 8px;
    a {
        font-size: 14px;
        margin-left: 8px;
    }
}
</style>